<template>
  <div class='a-row-under'>
    <a-row v-show='isPinYin'>
        <li class='li-class-s li-new' @click='getValues(0)' :value='0'>所有</li>
        <li class='li-class-s li-new' @click='getValues(item)' v-for='(item,index) in dictOptionsPinYin'>{{ item }}</li>
    </a-row>
    <!-- //隐藏,设置最大高度100px时，出现滚动条 -->
    <a-row style='overflow-y: scroll;overflow-x: hidden; max-height:100px;'>
      <a-checkbox-group v-if="tagType=='checkbox'" style='margin-top: 6px;!important;' @change='onChange' :value='arrayValue' :disabled='disabled'>
        <a-checkbox v-for='(item, key) in dictOptions' style='margin-left: 8px;' :key='key'
                    :value='item.value'>
          {{ item.text || item.label }}
        </a-checkbox>

      </a-checkbox-group>
<!--      <a-checkbox-group v-if="tagType=='checkable-tag'" style='margin-top: 6px;!important;' @change='onChange' :value='arrayValue' :disabled='disabled'>-->
<!--        <a-checkable-tag v-for='(item, key) in dictOptions' style='margin-left: 8px;' :key='key'-->
<!--                    :value='item.value'>-->
<!--          {{ item.text || item.label }}-->
<!--        </a-checkable-tag>-->
<!--      </a-checkbox-group>-->
      <a-radio-group v-if="tagType=='rediobox'"  @change='onChange' :value='radioValue' :disabled='disabled'>
        <a-radio v-for='(item, key) in dictOptions' style='margin-left: 8px;' :key='key'
                 :value='item.value'>
          {{ item.text || item.label }}
        </a-radio>
      </a-radio-group>
      <a-radio-group v-if="tagType=='rediobutton'"  @change='onChange' :value='radioValue' :disabled='disabled'>
        <a-radio-button v-for='(item, key) in dictOptions' style='margin-left: 8px;' :key='key'
                 :value='item.value'>
          {{ item.text || item.label }}
        </a-radio-button>
      </a-radio-group>
    </a-row>
  </div>
</template>

<script>
import { ajaxGetDictItems, getDictItemsFromCache } from '@/api/api'

let pinyin = require('js-pinyin')
export default {
  name: 'SMultiSelectTag',
  props: {
    dictCode: String,
    placeholder: String,
    disabled: Boolean,
    value: String,
    type: String,
    options: Array,
    isPinYin: {
      type: Boolean,
      default: true
    },
    spliter: {
      type: String,
      required: false,
      default: ','
    },
    popContainer: {
      type: String,
      default: '',
      required: false
    }
  },
  data() {
    return {
      dictOptions: [],
      // dictOptionsPinYin: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
      dictOptionsPinYin: [],
      tagType: '',
      arrayValue: !this.value ? [] : this.value.split(this.spliter),
      radioValue: '',
      optionsTotal: []
    }
  },
  created() {
    if (!this.type) {
      this.tagType = 'checkbox'
    } else {
      this.tagType = this.type
    }
    //获取字典数据
    //this.initDictData();
  },
  watch: {
    options: function(val) {
      this.setCurrentDictOptions(val)
    },
    dictCode: {
      immediate: true,
      handler() {
        this.initDictData()
      }
    },
    value(val) {
      if (!val) {
        this.arrayValue = []
        this.radioValue = null
      } else {
        this.arrayValue = this.value.split(this.spliter)
        this.radioValue = this.value
      }
    }
  },
  methods: {
    initDictData() {
      if (this.options && this.options.length > 0) {
        this.dictOptions = [...this.options]
      } else {
        //优先从缓存中读取字典配置
        let cacheOption = getDictItemsFromCache(this.dictCode)
        if (cacheOption && cacheOption.length > 0) {
          this.dictOptions = cacheOption
          return
        }
        //根据字典Code, 初始化字典数组
        ajaxGetDictItems(this.dictCode, null).then((res) => {
          if (res.success) {
            this.dictOptions = res.result
            this.optionsTotal = res.result
            //初始化中文检索对象
            this.dictOptionsPinYin = []
            let dictOptionsPinYinTemp = new Set()
            this.dictOptions.forEach(item => {
              let tempText = item.text.replace('lc', '')
              dictOptionsPinYinTemp.add(
                pinyin.getCamelChars(tempText).substring(0, 1)
              )

            })
            this.dictOptionsPinYin = Array.from(dictOptionsPinYinTemp).sort((a, b) => a.localeCompare(b))
          }
        })
      }

    },
    onChange(selectedValue) {
      this.$emit('change', selectedValue.join(this.spliter))
    },
    setCurrentDictOptions(dictOptions) {
      this.dictOptions = dictOptions
      this.optionsTotal = dictOptions
      //初始化中文检索对象
      console.log(dictOptions)
      this.dictOptionsPinYin = []
      let dictOptionsPinYinTemp = new Set()
      dictOptions.forEach(item => {
        let tempText = item.text || item.label
        tempText = tempText.replace('lc', '')
        if (tempText != '' && tempText != null) {
          dictOptionsPinYinTemp.add(
            pinyin.getCamelChars(tempText).substring(0, 1)
          )
        }
      })
      this.dictOptionsPinYin = Array.from(dictOptionsPinYinTemp).sort((a, b) => a.localeCompare(b))
    },
    getValues(val) {
      if(val == '0'){
        this.dictOptions = this.optionsTotal;
        return;
      }
      let temDictOptions = [];
      this.optionsTotal.forEach(item => {
        let tempText = item.text || item.label
        tempText = tempText.replace('lc', '')
        if (tempText != '' && tempText != null) {
            let temZm = pinyin.getCamelChars(tempText).substring(0, 1)
          if(val == temZm){
            temDictOptions.push(item);
          }
        }
      })
      this.dictOptions = temDictOptions;
    },
    getCurrentDictOptions() {
      return this.dictOptions
    },
    getParentContainer(node) {
      if (!this.popContainer) {
        return node.parentNode
      } else {
        return document.querySelector(this.popContainer)
      }
    },
    // update--begin--autor:lvdandan-----date:20201120------for：LOWCOD-1086 下拉多选框,搜索时只字典code进行搜索不能通过字典text搜索
    filterOption(input, option) {
      return option.componentOptions.children[0].children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    }
    // update--end--autor:lvdandan-----date:20201120------for：LOWCOD-1086 下拉多选框,搜索时只字典code进行搜索不能通过字典text搜索
  },
  model: {
    prop: 'value',
    event: 'change'
  }
}
</script>
<style>
.li-class-s {
  float: left;
  height: 20px;
  line-height: 20px;
  border: 1px solid #FFF;
  cursor: default;
  padding-left: 10px;
  padding-right: 10px;
  text-align: center;
  color: #005aa0;
  margin-bottom: 10px;
  margin-left: 2px;
}

.li-new:hover {
  border-color: #e4393c;
  color: #e4393c;
}
</style>